<template>
  <div id="app">
    <audio style="display:none; height: 0" ref="audio" preload="auto" src="http://onmxkx5tf.bkt.clouddn.com/yang_guang_chen/bg.mp3" loop="loop"></audio>
    <transition name="slide-left">
      <router-view class="view"/>
    </transition>
  </div>
</template>
<script>
import wx from '@/utils/wx'
export default {
  methods: {

  },
  mounted () {
    this.audio = this.$refs.audio
    this.audio && this.audio.play()
    document.addEventListener('WeixinJSBridgeReady', () => {
      this.audio && this.audio.play()
    }, false)
  },
  async created () {
    if (!window.sessionStorage.getItem('firstPageInit')) {
      this.$router.push({path: '/', query: {channel: this.$route.query.channel}})
    }
    await wx.init()
    wx.shareUrl({title: '指尖上的福利|里山电影节，抢票中！', desc: '全福州，一起免费看电影', imgUrl: 'http://onmxkx5tf.bkt.clouddn.com/share.jpg', link: window.location.href})
  }
}
</script>
<style lang="scss">
html,body,#app,.app-container {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color:#3f3e43;
}
.app-container {
  position: relative;
  min-height: 100%;
  background-color: #fbf7eb;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
.view{
  position: absolute;
  transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter {
    opacity: 0;
    transform: translate(0,100%);
}

.slide-left-leave-active{
     opacity: 0;
    transform: translate(0,-100%);
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s ease;
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
.full{
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    left: 0;
    z-index:10;
}
</style>
